<template>
	<div class="w100 h100 page">
		<three class="three" :type="activeName" />
		<div class="flex m-between h100">
			<div class="left flex-col h100">
				<!-- <Transition name="fade-transform" mode="out-in" appear> -->
				<component
					:is="[intelligenceSyn, intelligenceSyn, colTransport, ventilation, pressureFan, gas, electricPower, drainage][activeName]"
					:type="activeName"
				/>
				<!-- </Transition> -->
			</div>
			<div class="right flex s-center">
				<my-tabs v-model="activeName" />
			</div>
		</div>
	</div>
</template>

<script setup name="/index">
import three from './three.vue'
import intelligenceSyn from './left/intelligenceSyn.vue' // 智能综采
import colTransport from './left/colTransport.vue' // 主煤流运输
import ventilation from './left/ventilation.vue' // 通风
import pressureFan from './left/pressureFan.vue' // 压风机
import gas from './left/gas.vue' // 瓦斯
import electricPower from './left/electricPower.vue' // 电力
import drainage from './left/drainage.vue' // 排水

let activeName = ref(0)
</script>

<style scoped lang="scss">
.page {
	position: relative;
	.three {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		box-shadow: inset 0px 0px 250px 50px rgba(13, 16, 24, 0.9);
	}

	.left {
		width: 400px;
		padding: 26px 0 10px 10px;
		background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
		z-index: 2;
		box-sizing: border-box;
	}
	.right {
		pointer-events: auto;
		background: linear-gradient(270deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
		z-index: 2;
	}
}
</style>
